<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>设备数据面板</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
  <header class="container">
    <h1>设备数据面板</h1>
    <div class="controls">
      <input id="filterInput" placeholder="按 id 或用户名筛选…" />
      <label>
        刷新间隔
        <select id="intervalSelect">
          <option value="2">2s</option>
          <option value="5" selected>5s</option>
          <option value="10">10s</option>
          <option value="30">30s</option>
        </select>
      </label>
      <label>
        主题
        <select id="themeSelect">
          <option value="auto" selected>跟随系统</option>
          <option value="light">明亮</option>
          <option value="dark">暗黑</option>
        </select>
      </label>
      <button id="refreshBtn">立即刷新</button>
      {% if is_admin %}
          <!-- 管理员专属控件 -->
          <button id="clearBtn" type="button" class="danger">清空数据</button>
          <a href="/api/export" class="btn" style="margin-left:8px">导出 CSV</a>
          <a href="/logout" style="margin-left:8px">退出登录</a>
        {% else %}
          <a href="/login?next=/" class="link-login">管理员登录</a>
        {% endif %}
    </div>
  </header>

  <main class="container">
    <div class="stats">
      <div><span id="activeCount">0</span><small>活跃ID数（≤60s）</small></div>
      <div><span id="latestId">—</span><small>最近上传ID</small></div>
      <div><span id="latestTime">—</span><small>最近上传时间</small></div>
      <div><span id="lastUpdated">—</span><small>上次拉取</small></div>
    </div>

    <div class="table-wrap">
      <table id="dataTable">
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>数值</th>
            <th>上传时间</th>
            <th>延时(秒)</th>
            <th>状态</th>
            <th>历史</th>
          </tr>
        </thead>
        <tbody id="tableBody">
          <!-- JS 渲染 -->
        </tbody>
      </table>
      <div id="emptyHint" class="empty">暂无数据</div>
    </div>
  </main>

  <script src="/static/app.js"></script>

  <footer class="container">
    <details>
      <summary>如何上报数据（示例）</summary>
      <pre><code>curl -X POST http://localhost:5000/api/data \
  -H "Content-Type: application/json" \
  -d '{"id": 1, "username": "alice", "value": 23.5}'</code></pre>
      <pre><code># Python
import requests
payload = {"id": 2, "username": "bob", "value": 12.34}
requests.post("http://172.18.19.249:5000/api/data", json=payload).raise_for_status()</code></pre>
      <pre><code># Arduino 使用wifi模块发送数据（模块使用AT命令详见手册要求）
1、// 先构造json数据
char str1[15];
floatToChar(avgGravity, str1, sizeof(str1), 4);//avgGravity就是传感器的数据 该函数将浮点数转换为字符串（WCH库没有开浮点数打印）
char jsonData[128];
sprintf(jsonData, "{\"id\": 2, \"username\": \"alice\", \"value\": %s}", str1);//注意id要改成自己的id，username要改成自己的用户名
2、// 计算json数据的实际长度 用于发送json数据给服务器
int jsonLen = strlen(jsonData);
3、// 动态构造AT命令
char httpCmd[256];
sprintf((char *)httpCmd, "AT+HTTPRAW=1,3,\"application/json\",172.18.19.249,5000,\"/api/data\",%d", jsonLen);//172.18.19.249是服务器的IP地址，现场修改
4、// 发送AT命令
wifi.sendATCmd((u8 *)httpCmd, (u8 *)">", 4000);
5、// 发送json数据
wifi.sendATCmd((u8 *)jsonData, (u8 *)"OK", 10000);


###附floatToChar函数
// 函数功能：将float类型转换为char数组（字符串）
// 参数：
//   value: 要转换的float数值
//   result: 存储结果的字符数组
//   bufferSize: 字符数组的大小（建议至少15）
//   decimalPlaces: 保留的小数位数（1-6）
void floatToChar(float value, char *result, int bufferSize, int decimalPlaces = 4)
{

  long multiplier = 10000; // 默认保留4位小数

  // 放大并四舍五入
  long scaled = (long)(value * multiplier + (value >= 0 ? 0.5 : -0.5));

  // 分离整数和小数部分
  int integerPart = scaled / multiplier;
  int fractionalPart = scaled % multiplier;

  // 确保小数部分为正数
  int absFraction = abs(fractionalPart);

  // 格式化字符串，使用动态生成的格式控制符
  char format[10];
  sprintf(format, "%%d.%%0%dd", decimalPlaces);
  snprintf(result, bufferSize, format, integerPart, absFraction);
}
      </code></pre>
    </details>
  </footer>

  <script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>
